<template>
  <LazyLoad time="200" :callback="doInit" id="refLazyLoad">
    <div id="map" class="map">
      <slot></slot>
    </div>
  </LazyLoad>
</template>

<script>
import {Scene, Zoom} from '@antv/l7'
import {GaodeMap} from '@antv/l7-maps'

export default {
  name: 'L7Map',
  props: {
    zoom: {
      type: Number,
      default: 19
    },
    showControl: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      scene: null
    }
  },
  methods: {
    doInit() {
      this.$nextTick(() => this.initMap())
    },
    initMap() {
      const that = this

      let center
      if (this.$store.getters.cityCenter) {
        center = JSON.parse(this.$store.getters.cityCenter)
        // center = [111.448572,41.125314]
      } else {
        center = [116.397428, 39.90923]
      }

      // 全局加载高德地图API
      const map = new AMap.Map('map', {
        viewMode: '3D',
        resizeEnable: true, // 是否监控地图容器尺寸变化
        // mapStyle: 'amap://styles/7c5d81c55592164b6f658b34249e458f',
        center: center,
        zoom: this.zoom || 19,
        minZoom: 6
      })

      // 地图上点击事件
      // map.on('click', (e) => {
      //   console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
      // })
      // map.on('dblclick', (e) => {
      //   console.log('dblclick',e,e.lnglat.getLng() + ',' + e.lnglat.getLat())
      // })

      // 方式1
      this.scene = new Scene({
        id: 'map',
        logoVisible: false,
        map: new GaodeMap({
          mapInstance: map
        })
      })

      this.scene.on('loaded', () => {
        that.$emit('mapLoaded', this.scene)

        if (this.showControl) {
          const zoom = new Zoom({
            position: 'leftcenter',
          });

          // 将实例化的控件添加至 L7 中
          this.scene.addControl(zoom);
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 100%;
}

::v-deep .amap-copyright {
  display: none !important;
}
</style>
